<template>
  <section class="recommend-content">
    <!-- 顶部卡片 -->
    <section class="top-card">
      <img :src="topList.coverImgUrl" alt class="card-img" />
      <section class="card-detail">
        <input type="button" value="精品歌单" />
        <p class="name" v-text="topList.name"></p>
        <p class="description" v-text="topList.description"></p>
      </section>
      <img :src="topList.coverImgUrl" alt class="card-bg" />
    </section>
    <!-- 导航栏 -->
    <section class="tab-bar">
      <span class="item" :class="{active:tag=='全部'}" @click="tag='全部'">全部</span>
      <span class="item" :class="{active:tag=='欧美'}" @click="tag='欧美'">欧美</span>
      <span class="item" :class="{active:tag=='华语'}" @click="tag='华语'">华语</span>
      <span class="item" :class="{active:tag=='流行'}" @click="tag='流行'">流行</span>
      <span class="item" :class="{active:tag=='说唱'}" @click="tag='说唱'">说唱</span>
      <span class="item" :class="{active:tag=='摇滚'}" @click="tag='摇滚'">摇滚</span>
      <span class="item" :class="{active:tag=='电子'}" @click="tag='电子'">电子</span>
      <span class="item" :class="{active:tag=='轻音乐'}" @click="tag='轻音乐'">轻音乐</span>
      <span class="item" :class="{active:tag=='ACG'}" @click="tag='ACG'">ACG</span>
      <span class="item" :class="{active:tag=='怀旧'}" @click="tag='怀旧'">怀旧</span>
      <span class="item" :class="{active:tag=='治愈'}" @click="tag='治愈'">治愈</span>
      <span class="item" :class="{active:tag=='旅行'}" @click="tag='旅行'">旅行</span>
    </section>
    <!-- 内容区 -->
    <section>
      <ul class="song-list">
        <li v-for="(item,index) in songList" :key="index" class="song-item" @click="toSongList(item.id)">
          <!-- <span class="item-source">{{item.playCount}}</span> -->
          <img :src="item.coverImgUrl" />
          <p v-text="item.description" class="list-name"></p>
        </li>
      </ul>
    </section>
    <!-- 分页：total总共条数，current-page当前页，page-size每页条数，current-change页码改变事件 -->
    <section class="page">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="10"
        @current-change="handleCurrentChange"
        :current-page="page"
      ></el-pagination>
    </section>
  </section>
</template>

<script>
import axios from "axios";
export default {
  name: "recommend",
  data() {
    return {
      // 推荐歌单
      topList: {},
      // 歌单列表
      songList: [],
      // 当前选择的分类
      tag: "全部",
      // 总条数
      total: 0,
      // 页码
      page: 1,
    };
  },
  // 生命函数钩子
  created() {
    this.topData();
    this.listData();
  },
  // 侦听器
  watch: {
    tag() {
      this.topData();
      this.listData();
      this.page = 1;
    },
  },
  methods: {
    topData() {
      // 精品歌单 https://autumnfish.cn/top/playlist/highquality
      axios({
        method: "get",
        url: "https://autumnfish.cn/top/playlist/highquality",
        params: {
          limit: 1,
          cat: this.tag,
        },
      }).then((res) => {
        this.topList = res.data.playlists[0];
      });
    },
    listData() {
      // 歌单列表 https://autumnfish.cn/top/playlist/ (参数limit,offset偏移数量,cat歌单的标签)
      axios({
        method: "get",
        url: "https://autumnfish.cn/top/playlist/",
        params: {
          limit: 10,
          cat: this.tag,
          offset: (this.page - 1) * 10,
        },
      }).then((res) => {
        this.total = res.data.total; //总条数
        this.songList = res.data.playlists;
      });
    },
    handleCurrentChange(val) {
      // 保存页码
      this.page = val;
      // 重新获取数组
      this.listData();
    },
    // 歌单详情
    toSongList(id) {
      this.$router.push(`/songlists?keyid=${id}`);
    },
  },
};
</script>

<style lang="scss">
</style>